<template>
    <view class="page">
        <back :title="'提现记录'" :isBack="true"></back>
        <scroll-view scroll-y class="record_big_box" v-if="recordList.length > 0" @scrolltolower="lower()">
            <view class="txjl_box">提现记录</view>
            <view class="zs_js_box" v-for="(item, index) in recordList" :key="index">
                <view class="top_box">
                    <view class="left_zs_js_box">
                        <view class="tx_box">
                            <image :src="item.avatar" mode="scaleToFill" />
                        </view>
                        <view>{{ item.nickname }}</view>
                    </view>
                    <view class="right_zs_js_box">
                        <view class="left_zs_js_top_box">{{ item.withdraw_money }}</view>
                        <view class="left_zs_js_bot_box">
                            {{ item.status_name }}
                        </view>
                    </view>
                </view>
                <view class="txsj_box" style="margin-bottom: 18rpx;">提现时间：{{ item.created_at }}</view>
                <view class="txsj_box" style="margin-bottom: 30rpx;">联系电话：{{ item.phone }}</view>
                <view class="lianggetupian_box">
                    <view class="left_box">
                        收款码：
                        <view class="shouuuanma_box">
                            <image :src="item.img_url" @click="ClickImage(item.img_url)" mode="scaleToFill" />
                        </view>
                    </view>
                    <view class="right_box">
                        <template v-if="item.voucher_url">
                            转账凭证：
                            <view class="zzpz_box">
                                <image :src="item.voucher_url" @click="ClickImage(item.voucher_url)"
                                    mode="scaleToFill" />
                            </view>
                        </template>
                    </view>
                </view>
            </view>
            <aLoadMore :status="loadStatus" mode="loading2" color="#808080" textColor="#808080" textSize="24rpx"
                padding="" :loadTitle="loadTitle"></aLoadMore>
        </scroll-view>
        <view v-else>
            <empoy :imageUrl="'https://build.lwjcg.com/uploads/empty_order.png'" :kongtext="'暂无数据'"></empoy>
        </view>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
    components: {
        back, empoy
    },
    data() {
        return {
            loadStatus: 'down',//加载状态down,loading,normal
            loadTitle: {
                down: "上拉加载更多",
                loading: "正在加载",
                normal: "没有更多了",
            },
            page: 1,   // 第一页
            flag: true, // 防抖开关 防止用户不停的下拉
            recordList: []
        }
    },
    onShow() {
        this.getwithIndex()
    },
    methods: {
        lower() {
            if (this.flag) {
                this.orderInfo();
            } else {
                this.loadStatus = 'normal'
            }

        },
        ClickImage(PhotoAddress) {
            uni.previewImage({
                urls: [PhotoAddress], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
                current: '', // 当前显示图片的http链接，默认是第一个
                success: function (res) { },
                fail: function (res) { },
                complete: function (res) { },
            })
        },
        getwithIndex() {
            let data = {
                page: this.page
            }
            this.loadStatus = 'loading'
            this.$Request.post(this.$api.word.withdrawIndex, data).then(res => {
                if (res.code == 200) {
                    this.loadStatus = 'down'
                    var recordList = res.data.withdraws;
                    this.page++;
                    this.recordList = this.recordList.concat(recordList);
                    if (recordList.length < 20) {
                        this.flag = false
                        this.loadStatus = 'normal'
                    } else {
                        this.flag = true
                    }
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(246, 246, 246, 1);

    .record_big_box {
        width: 704rpx;
        height: calc(100vh - 200rpx);
        border-radius: 28rpx;
        margin: auto;
        margin-top: 20rpx;
        background: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        padding-top: 28rpx;

        .txjl_box {
            width: 100%;
            box-sizing: border-box;
            padding-left: 28rpx;
            height: 40rpx;
            opacity: 1;
            font-size: 28rpx;
            line-height: 40rpx;
            color: rgba(0, 0, 0, 1);
            margin-bottom: 4rpx;

        }

        .zs_js_box {
            width: 636rpx;
            height: 512rpx;
            border-bottom: 2rpx solid rgba(245, 245, 245, 1);
            margin: auto;

            .top_box {
                width: 636rpx;
                height: 144rpx;
                display: flex;
                margin: auto;
                justify-content: space-between;
                margin-bottom: 24rpx;

                .left_zs_js_box {
                    height: 100%;
                    width: 70%;
                    box-sizing: border-box;
                    padding-top: 32rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .tx_box {
                        width: 88.24rpx;
                        height: 88.24rpx;
                        border-radius: 50%;
                        margin-right: 12rpx;

                        image {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }

                    }

                    .name_box {
                        height: 48.76rpx;
                        opacity: 1;
                        /** 文本1 */
                        font-size: 37.15rpx;
                        font-weight: 500;
                        letter-spacing: 0rpx;
                        line-height: 52.01rpx;
                        color: rgba(0, 0, 0, 1);

                    }
                }

                .right_zs_js_box {
                    height: 100%;
                    width: 28%;
                    box-sizing: border-box;
                    padding-top: 32rpx;

                    .left_zs_js_top_box {
                        width: 100%;
                        height: 46rpx;
                        font-size: 32rpx;
                        font-weight: 600;
                        line-height: 46rpx;
                        color: rgba(0, 0, 0, 1);
                        margin-bottom: 10rpx;
                        text-align: right;
                    }

                    .left_zs_js_bot_box {
                        width: 100%;
                        height: 34rpx;
                        opacity: 1;
                        font-size: 24rpx;
                        line-height: 34rpx;
                        color: rgba(128, 128, 128, 1);
                        text-align: right;

                    }
                }
            }

            .txsj_box {
                width: 636rpx;
                height: 37.15rpx;
                margin: auto;
                opacity: 1;
                /** 文本1 */
                font-size: 27.86rpx;
                font-weight: 400;
                line-height: 39.01rpx;
                color: rgba(128, 128, 128, 1);

            }

            .lianggetupian_box {
                width: 636rpx;
                height: 200rpx;
                margin: auto;
                display: flex;
                justify-content: space-between;


                .left_box {
                    width: 42%;
                    height: 200rpx;
                    // background-color: red;
                    position: relative;

                    .shouuuanma_box {
                        position: absolute;
                        right: 0;
                        top: 10rpx;
                        width: 143.96rpx;
                        height: 176.47rpx;
                        border-radius: 9.29rpx;
                        border: 4.64rpx solid rgba(26, 194, 121, 1);

                        image {
                            width: 100%;
                            height: 100%;
                            border-radius: 9.29rpx;
                        }


                    }
                }

                .right_box {
                    width: 44%;
                    height: 200rpx;
                    // background-color: aqua;
                    position: relative;

                    .zzpz_box {
                        position: absolute;
                        right: 0;
                        top: 10rpx;
                        width: 143.96rpx;
                        height: 176.47rpx;
                        border-radius: 9.29rpx;
                        border: 4.64rpx solid rgba(26, 194, 121, 1);
                    }

                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 9.29rpx;
                    }
                }
            }

        }

    }


}
</style>